<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1424468_b0et22c1hq5.css">
    <link rel="stylesheet" href="../css/lunbotu.css">
    <link rel="stylesheet" href="../css/public.css">
    <script src="../JS/index.js"></script>
    <script src="../JS/public.js"></script>
</head>
<body>
<nav>
    <div class="nav-main">
        <div class="nav-bar">
            <ul id="uu">
                <li>
                    <a href="#">家用电器</a>
                    <div id="hide">
                        <div class="hide-left">
                            <div class="hide-left-title">
                                <a href="###">
                                    家电馆
                                    <i class="iconfont icon-dibudaohanglan-"></i>
                                </a>
                                <a href="###">
                                    家电专卖店
                                    <i class="iconfont icon-dibudaohanglan-"></i>
                                </a>
                                <a href="###">
                                    家电服务
                                    <i class="iconfont icon-dibudaohanglan-"></i>
                                </a>
                                <a href="###">
                                    企业采购
                                    <i class="iconfont icon-dibudaohanglan-"></i>
                                </a>
                                <a href="###">
                                    商用电商
                                    <i class="iconfont icon-dibudaohanglan-"></i>
                                </a>
                                <a href="###">
                                    以旧换新
                                    <i class="iconfont icon-dibudaohanglan-"></i>
                                </a>
                            </div>
                            <div class="hide-left-bottom">
                                <dl>
                                    <dt>
                                        <a href="###">电视</a>
                                    </dt>
                                    <dd>
                                        <a href="###">超薄电视</a>
                                        <a href="###">全面屏电视</a>
                                        <a href="###">智能电视</a>
                                        <a href="###">OLED电视</a>
                                        <a href="###">智慧屏</a>
                                        <a href="###">4K超清电视</a>
                                        <a href="###">55英寸</a>
                                        <a href="###">65英寸</a>
                                        <a href="###">电视配件</a>
                                    </dd>

                                </dl>
                                <dl>
                                    <dt>
                                        <a href="###">空调</a>
                                    </dt>
                                    <dd>
                                        <a href="###">空调挂机</a>
                                        <a href="###">空调柜机</a>
                                        <a href="###">变频空调</a>
                                        <a href="###">一级能效</a>
                                        <a href="###">移动空调</a>
                                        <a href="###">中央空调</a>
                                        <a href="###">依旧换新</a>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <a href="###">洗衣机</a>
                                    </dt>
                                    <dd>
                                        <a href="###">滚筒洗衣机</a>
                                        <a href="###">洗烘一体机</a>
                                        <a href="###">波轮洗衣机</a>
                                        <a href="###">迷你洗衣机</a>
                                        <a href="###">烘干机</a>
                                        <a href="###">洗衣机配件</a>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <a href="###">冰箱</a>
                                    </dt>
                                    <dd>
                                        <a href="###">多门</a>
                                        <a href="###">对开门</a>
                                        <a href="###">三门</a>
                                        <a href="###">双门</a>
                                        <a href="###">冷柜/冰吧</a>
                                        <a href="###">酒柜</a>
                                        <a href="###">冰箱配件</a>
                                    </dd>
                                </dl>
                                <dl class="item5">
                                    <dt>
                                        <a href="###">厨卫大电</a>
                                    </dt>
                                    <dd>
                                        <a href="###">油烟机</a>
                                        <a href="###">燃气灶</a>
                                        <a href="###">烟灶套装</a>
                                        <a href="###">集成灶</a>
                                        <a href="###">消毒柜</a>
                                        <a href="###">洗碗机</a>
                                        <a href="###">电热水器</a>
                                        <a href="###">燃气热水器</a>
                                        <a href="###">空气能热水器</a>
                                        <a href="###">太阳能热水器</a>
                                        <a href="###">嵌入式厨电</a>
                                        <a href="###">烟机灶具配件</a>
                                    </dd>
                                </dl>
                                <dl class="item6">
                                    <dt>
                                        <a href="###">厨房小电</a>
                                    </dt>
                                    <dd>
                                        <a href="###">破壁机</a>
                                        <a href="###">电烤箱</a>
                                        <a href="###">电饭煲</a>
                                        <a href="###">电压力锅</a>
                                        <a href="###">电炖锅</a>
                                        <a href="###">豆浆机</a>
                                        <a href="###">料理机</a>
                                        <a href="###">咖啡机</a>
                                        <a href="###">电饼铛</a>
                                        <a href="###">榨汁机/原汁机</a>
                                        <a href="###">电水壶/热水瓶</a>
                                        <a href="###">微波炉</a>
                                        <a href="###">多用途锅</a>
                                        <a href="###">养生壶</a>
                                        <a href="###">电磁炉</a>
                                        <a href="###">面包机</a>
                                        <a href="###">空气炸锅</a>
                                        <a href="###">面条机</a>
                                        <a href="###">电陶炉</a>
                                        <a href="###">煮蛋器</a>
                                        <a href="###">电烧烤炉</a>
                                    </dd>
                                </dl>
                                <dl class="item7">
                                    <dt>
                                        <a href="###">生活电器</a>
                                    </dt>
                                    <dd>
                                        <a href="###">取暖电器</a>
                                        <a href="###">加湿器</a>
                                        <a href="###">空气净化器</a>
                                        <a href="###">吸尘器</a>
                                        <a href="###">除螨仪</a>
                                        <a href="###">扫地机器人</a>
                                        <a href="###">除湿机</a>
                                        <a href="###">干衣机</a>
                                        <a href="###">蒸汽拖把/拖把机</a>
                                        <a href="###">挂烫机/熨斗</a>
                                        <a href="###">电话机</a>
                                        <a href="###">饮水机</a>
                                        <a href="###">净水器</a>
                                        <a href="###">电风扇</a>
                                        <a href="###">冷风扇</a>
                                        <a href="###">毛球修剪器</a>
                                        <a href="###">生活电器配件</a>
                                    </dd>
                                </dl>
                                <dl class="item8">
                                    <dt>
                                        <a href="###">个护健康</a>
                                    </dt>
                                    <dd>
                                        <a href="###">剃须刀</a>
                                        <a href="###">电动牙刷</a>
                                        <a href="###">电吹风</a>
                                        <a href="###">美容器</a>
                                        <a href="###">洁面仪</a>
                                        <a href="###">按摩器</a>
                                        <a href="###">健康秤</a>
                                        <a href="###">卷/直发器</a>
                                        <a href="###">剃/脱毛器</a>
                                        <a href="###">理发器</a>
                                        <a href="###">足浴盆</a>
                                        <a href="###">足疗机</a>
                                        <a href="###">按摩椅</a>
                                    </dd>
                                </dl>
                                <dl class="item9">
                                    <dt>
                                        <a href="###">视听影音</a>
                                    </dt>
                                    <dd>
                                        <a href="###">家庭影院</a>
                                        <a href="###">KTV音响</a>
                                        <a href="###">迷你音响</a>
                                        <a href="###">DVD</a>
                                        <a href="###">功放</a>
                                        <a href="###">回音壁</a>
                                        <a href="###">麦克风</a>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="hide-right">
                            <div class="hide-right-top">
                                <a href="###">
                                    <img src="images/1-1.webp" alt="">
                                </a>
                                <a href="###">
                                    <img src="images/1-2.webp" alt="">
                                </a>
                                <a href="###">
                                    <img src="images/1-3.webp" alt="">
                                </a>
                                <a href="###">
                                    <img src="images/1-4.webp" alt="">
                                </a>
                                <a href="###">
                                    <img src="images/1-5.webp" alt="">
                                </a>
                                <a href="###">
                                    <img src="images/1-6.webp" alt="">
                                </a>
                                <a href="###">
                                    <img src="images/1-7.webp" alt="">
                                </a>
                                <a href="###">
                                    <img src="images/1-8.webp" alt="">
                                </a>
                            </div>
                            <div class="hide-right-bottom">
                                <a href="###">
                                    <img src="images/1-9.webp" alt="">
                                </a>
                                <a href="###">
                                    <img src="images/1-10.webp" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">手机</a>
                    <a href="#">运营商</a>
                    <a href="#">数码</a>
                </li>
                <li>
                    <a href="#">电脑</a>
                    <a href="#">办公</a>
                </li>
                <li>
                    <a href="#">家居</a>
                    <a href="#">家具</a>
                    <a href="#">家装</a>
                    <a href="#">厨具</a>
                </li>
                <li>
                    <a href="#">男装</a>
                    <a href="#">女装</a>
                    <a href="#">童装</a>
                    <a href="#">内衣</a>
                </li>
                <li>
                    <a href="#">美妆</a>
                    <a href="#">个护清洁</a>
                    <a href="#">宠物</a>
                </li>
                <li>
                    <a href="#">女鞋</a>
                    <a href="#">箱包</a>
                    <a href="#">钟表</a>
                    <a href="#">珠宝</a>
                </li>
                <li>
                    <a href="#">男鞋</a>
                    <a href="#">运动</a>
                    <a href="#">户外</a>
                </li>
                <li>
                    <a href="#">房产</a>
                    <a href="#">汽车</a>
                    <a href="#">汽车用品</a>
                </li>
                <li>
                    <a href="#">母婴</a>
                    <a href="#">玩具乐器</a>
                </li>
                <li>
                    <a href="#">食品</a>
                    <a href="#">酒类</a>
                    <a href="#">生鲜</a>
                    <a href="#">特产</a>
                </li>
                <li>
                    <a href="#">艺术</a>
                    <a href="#">礼品鲜花</a>
                    <a href="#">农资绿植</a>
                </li>
                <li>
                    <a href="#">医药保健</a>
                    <a href="#">计生情趣</a>
                </li>
                <li>
                    <a href="#">图书</a>
                    <a href="#">文娱</a>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">机票</a>
                    <a href="#">酒店</a>
                    <a href="#">旅游</a>
                    <a href="#">生活</a>
                </li>
                <li>
                    <a href="#">理财</a>
                    <a href="#">众筹</a>
                    <a href="#">白条</a>
                    <a href="#">保险</a>
                </li>
                <li>
                    <a href="#">安装</a>
                    <a href="#">维修</a>
                    <a href="#">清洗</a>
                    <a href="#">二手</a>
                </li>
                <li>
                    <a href="#">工业品</a>
                </li>
            </ul>
        </div>
        <div class="nav-banner" id="banner">
            <div class="screen">
                <ul>
                    <li>
                        <a href="#">
                            <img src="../images/banner1.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/banner2.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/banner3.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/banner4.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/banner5.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/banner6.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/banner7.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/banner8.webp" alt="">
                        </a>
                    </li>
                </ul>
                <ol>
                </ol>
            </div>
            <button class="jiantou-l" id="left1">
                <i></i>
            </button>
            <button class="jiantou-r" id="right1">
                <i></i>
            </button>
            <script>
                var banner = my$("banner");
                var screen = banner.children[0];
                var imgWidth = screen.offsetWidth;
                var ulObj = screen.children[0];
                var list = ulObj.children;
                var olObj = screen.children[1];
                var pic = 0;
                for (var i = 0;i < list.length;i++){
                    var liObj = document.createElement("li");
                    olObj.appendChild(liObj);
                    liObj.setAttribute("index",i);
                    liObj.onmouseover = function(){
                        for (var j = 0;j < olObj.children.length;j++){
                            olObj.children[j].removeAttribute("class");
                        }
                        this.className = "current";
                        pic = this.getAttribute("index");
                        animate(ulObj,-pic*imgWidth);
                    };
                }
                olObj.children[0].className = "current";

                ulObj.appendChild(ulObj.children[0].cloneNode(true));

                banner.onmouseover = function(){
                    clearInterval(timeId2);
                };
                banner.onmouseout = function(){
                  timeId2 = setInterval(autoHandle,3000);
                };

                var timeId2 = setInterval(autoHandle,3000);
                my$("right1").onclick = autoHandle;

                function autoHandle(){
                    if (pic == list.length - 1){
                        pic = 0;
                        ulObj.style.left = 0 + "px";
                    }

                    pic++;
                    animate(ulObj,-pic*imgWidth);
                    if (pic == list.length - 1){
                        olObj.children[olObj.children.length - 1].className = "";
                        olObj.children[0].className = "current";
                    }else{
                        for (var i = 0;i < olObj.children.length;i++){
                            olObj.children[i].removeAttribute("class");
                        }
                        olObj.children[pic].className = "current";
                    }
                }

                my$("left1").onclick = function(){
                    if (pic == 0){
                        pic = 8;
                        ulObj.style.left = -pic*imgWidth + "px";
                    }
                    pic--;
                    animate(ulObj,-pic*imgWidth);
                    for (var i = 0;i < olObj.children.length;i++){
                        olObj.children[i].removeAttribute("class");
                    }
                    olObj.children[pic].className = "current";
                };

                function animate(element,target){
                    clearInterval(element.timeId);
                    element.timeId = setInterval(function(){
                        var current = element.offsetLeft;
                        var step = 10;
                        step = current > target ? -step : step;
                        current += step;
                        if (Math.abs(current - target) > Math.abs(step)){
                            element.style.left = current + "px";
                        } else{
                            clearInterval(element.timeId);
                            element.style.left = target + "px";
                        }
                    },10);
                }
            </script>

        </div>
        <script>

        </script>
        <div class="nav-product">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/pro1.webp" alt="">
                        <p></p>
                    </a>
                </li>
                <li class="center">
                    <a href="#">
                        <img src="images/pro2.webp" alt="">
                        <p></p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/pro3.webp" alt="">
                        <p></p>
                    </a>
                </li>
                <button class="jiantou-l">
                    <i class="r"></i>
                </button>
                <button class="jiantou-r">
                    <i class="l"></i>
                </button>
            </ul>
        </div>
        <div class="nav-r">
            <div class="nav-r-t">
                <div class="nav-left">
                    <a class="one" href="#">
                        <img src="images/logo1.png" alt="">
                    </a>
                    <div class="login">
                        <p><a href="#">Hi~欢迎逛京东！</a></p>
                        <p>
                            <a href="#">登录</a>
                            <span>|</span>
                            <a href="#">注册</a>
                        </p>
                    </div>
                </div>
                <div class="boon">
                    <a class="red" href="#">新人福利</a>
                    <a class="black" href="#">PLUS会员</a>
                </div>
            </div>
            <div class="nav-r-c">
                <div class="nav-r-top">
                    <h5>京东快报</h5>
                    <a href="#">
                        更多
                        <i class="sanjiao xuanzhuan"></i>
                    </a>
                </div>
                <div class="nav-r-b">
                    <ul class="first">
                        <li>
                            <a href="#">
                                <span>推荐</span>
                                华为鸿蒙系统，操作方式类似iOS 13，花粉们都尖叫了
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>热门</span>
                                iPhoneSE2概念图：屏下指纹识别
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>热议</span>
                                米粉乐了！续航120公里的小米电动车上市！价格便宜！
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>推荐</span>
                                华为鸿蒙系统，操作方式类似iOS 13，花粉们都尖叫了
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="nav-r-bottom">
                <ul class="nav-icon">
                    <li>
                        <a href="#">
                            <i class="iconfont icon-huafei"></i>
                            <span>话费</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-jipiao"></i>
                            <span>机票</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-jiudian"></i>
                            <span>酒店</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-youxi"></i>
                            <span>游戏</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-jiayouka"></i>
                            <span>加油卡</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-hunyushouyang-jiaotongchuhang-jiaoyujiuxue-"></i>
                            <span>火车票</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-zhongchou"></i>
                            <span>众筹</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-licai"></i>
                            <span>理财</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-baitiao"></i>
                            <span>白条</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-dianyingpiao"></i>
                            <span>电影票</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-qiyegou"></i>
                            <span>企业购</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-lipinqia"></i>
                            <span>礼品卡</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
</body>
</html>